<html !DOCTYPE>
<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
	*{
		font-size:24px;
	}
	ul{
		list-style: none;
	}
	.btn{
		cursor:pointer;
	}
	.query-label{
		width: 100px;
		display: inline-block;
		font-size:12px;
	}
	.query-input{
		width:300px;
		font-size: 12px;
		
	}
	.confirm-menu,.task-menu{
		display:none;
	}
</style>
<link rel="stylesheet" href="https://twimg0-a.akamaihd.net/a/1354181157/t1/css/t1_core.bundle.css" type="text/css" media="screen">
 <link rel="stylesheet" href="https://twimg0-a.akamaihd.net/a/1354181157/t1/css/t1_more.bundle.css" type="text/css" media="screen">
<head>
<body>
<header><h1> User timeline demo<h1></header>
<div>
	<h1>Timeline </h1>
	<div id='timeline'>
		<p>SOY EL TIME LINE DE TU HIJO</p>
	</div>
	<p><label>Autor: </label><input type='text' name='autor-input' id='autor-input' style='width:600px'></p>
	<p><label>Text: </label><input type='text' name='text-input' id='text-input' style='width:600px'></p>
	<span id='start-btn' style='cursor:pointer'>Send</span>
</div>
<footer>
	<h4>Anti Bullying System</h4>
</footer>
	<script type="text/javascript">
		$('document').ready(function(){
			$('#start-btn').click(function(){
				var elem = $(this);

					var input = $('#text-input')
					$.ajax({
						'url':'/backend/predict',
						'type':'GET',
						'dataType': 'json',
						'data':{'text':input.val()},
						'success':function(resp){
							if (resp.outputLabel != 'normal'){
								alert('BULLYING DETECTADO');
								$.ajax({
									'url':'/notifier/broadcast',
									'type': 'POST',
									'dataType': 'json',
									'data': {"text":$('#text-input').val(),
					                    "code":'2321312323',
					                    "level":resp.outputLabel,
					                    "victims":'martinrevert',
					                    "scrapper":$('#autor-input').val()},
									'success':function(resp){
										return true;
									}
								});
							}else{
								$('#timeline').prepend('<div id="para-borrar" style="background-color:green;"><p><label>FROM:'+ $('#autor-input').val()+ '</label></p><label>TEXT: </label><p class="text">'+input.val()+'</p></div>');
							}
						}
					});
	
			});			
		});
	</script>
</body>
</html>